<template>
    <el-menu default-active="home" @select="handleSelect">
        <template v-for="item of routerMessages">
            <template v-if="item.children">
                <el-sub-menu :key="item.name" :index="item.name">
                    <template #title>
                        {{ item.name }}
                    </template>
                    <el-menu-item v-for="menu of item.children" :index="menu.name">
                        <el-menu-item @click="linkToPage(menu)" :index="menu.name">
                            <template #title>{{ menu.label }}</template>
                        </el-menu-item>
                    </el-menu-item>
                </el-sub-menu>
            </template>
            <template v-else>
                <el-menu-item @click="linkToPage(item)" :index="item.name">
                    <template #title>{{ item.label }}</template>
                </el-menu-item>
            </template>
        </template>
    </el-menu>
</template>

<script lang="ts" setup name="Link">
import { routerMessages } from '@/router/index'
import { useRouter, type RouteLocationRaw } from 'vue-router';
const router = useRouter()

function linkToPage(msg: any) {
    router.push({
        name: msg.name!
    })
}
function handleSelect(params: any) {
    console.log('==> params', params);
}
</script>

<style lang="less" scope>
.link-wrapper {
    text-align: center;
    line-height: 48px;
    width: 100%;
    height: 48px;
    border-bottom: 1px solid rgb(220, 223, 230);
}

.link-wrapper:hover {
    cursor: pointer;
    color: rgb(76, 121, 226);
}
</style>